<template>
	<n-page>
		<view slot="navbar"></view>
		<view slot="header">
			<view class="head-wrap">
				<!-- 搜索区域 -->
				<view class="search-wrap uni-flex uni-row">
					<view class="flex-item input-wrap">
						<input class="uni-input" maxlength="50" disabled v-model="keyword" confirm-type="search" @click="to_search()"
						 placeholder="请输入您要搜索的店铺" />
						<text class="iconfont iconIcon_search" @click.stop="to_search()"></text>
					</view>
				</view>
			
				<!-- 排序 -->
				<view class="sort-wrap">
					<view class="comprehensive-wrap" @click="$util.redirectTo('/otherpages/index/city/city')">
						<text>{{city.name}}</text><text class="iconfont iconiconangledown"></text>
					</view>
					<view class="Banner-item" :class="is_open1==1?'active':''" @click="sortTabClick(1)">{{industry.name==''?'主营业务':industry.name}}
						<text class="iconfont iconiconangledown"></text>
					</view>
					<view class="Banner-item" @click="sortTabClick(2)" :class="is_open2==1?'active':''">{{sorting.sort_showname==''?'筛选条件':sorting.sort_showname}}
						<text class="iconfont iconiconangledown"></text></view>
				</view>
			</view>
		</view>
		<view slot="body" style="height: 100%;">

			<mescroll-uni top="180" ref="mescroll" @getData="getShopList">
				<block slot="list">
					<view class="margin-top-xs">
						<view class="border-bottom-xs border-gray-4 border-solid margin-bottom-xs flex-row padding-md justify-center" style="border: 0;" @click="jump('/otherpages/shop/index/index?site_id=' + item.site_id)" v-for="(item, index) in shopList"
						 :key="index">
							<view class="margin-right-md">
								<n-image width="130" height="130" class="radius-xl" :src="$util.img(item.avatar)" :placeholder="$util.getDefaultImage().default_shop_img" mode="aspectFit"></n-image>
							</view>
							<view class="flex-1">
								<view class="flex-row justify-between items-center">
									<view class="lines-1 text-md text-bold"><text>{{ item.site_name }}</text> </view>
									<text class="ns-text-color-gray" style="font-size: 22rpx;">{{ $lang('distance') }}{{ item.juli|distance }}</text>
								</view>
								<view class="lines-1">
									<text class="color-gray-8">{{item.full_address}}</text>
								</view>
								<view class="color-gray-7">
									<text>{{ $lang('main') }}：{{ item.category_name }}</text><text style="margin-left: 31rpx;">有{{ item.sub_num }}人关注</text>
								</view>
							</view>
						</view>
						<view class="empty" v-if="!shopList.length">
							<ns-empty text="当前街上没有店铺哦"></ns-empty>
						</view>
					</view>
				</block>
			</mescroll-uni>
			<loading-cover ref="loadingCover"></loading-cover>
				
			<uni-popup ref="works_popup" type="top" class="wap-floating" @change="change">
				<scroll-view scroll-y="true" class="item-group">
					<view class="works_item" v-for="(item,index) in industryList" :key="index" @click="industry_check(item)">
						<text>{{item.category_name}}</text>
						<image src="../../../static/no_check.png" mode="aspectFit" v-if="item.category_id!=industry.id"></image>
						<image src="../../../static/check.png" mode="aspectFit" v-if="item.category_id==industry.id"></image>
					</view>

				</scroll-view>
				<view class="btn-group">
					<button type="default" class="quxiao-btn" @click="reset(1)">恢复默认</button>
					<!-- <button type="default" class="save-btn" @click="sue_popup()">确定</button> -->
				</view>
			</uni-popup>
			<uni-popup ref="conditions_popup" type="top" class="wap-floating" @change="change">
				<scroll-view scroll-y="true" class="item-group">
					<view class="works_item" @click="conditions_check(2,'distance','asc')">
						<text>距离从近到远</text>
						<image src="../../../static/check.png" mode="aspectFit" v-if="sorting.sort_showname=='距离从近到远'"></image>
						<image src="../../../static/no_check.png" mode="aspectFit" v-else></image>
					</view>
					<view class="works_item" @click="conditions_check(2,'distance','desc')">
						<text>距离从远到近</text>
						<image src="../../../static/check.png" mode="aspectFit" v-if="sorting.sort_showname=='距离从远到近'"></image>
						<image src="../../../static/no_check.png" mode="aspectFit" v-else></image>
					</view>
					<view class="works_item" @click="conditions_check(1,'shop_sales','asc')">
						<text>销量从高到低</text>
						<image src="../../../static/check.png" mode="aspectFit" v-if="sorting.sort_showname=='销量从高到低'"></image>
						<image src="../../../static/no_check.png" mode="aspectFit" v-else></image>
					</view>
					<view class="works_item" @click="conditions_check(1,'shop_sales','desc')">
						<text>销量从低到高</text>
						<image src="../../../static/check.png" mode="aspectFit" v-if="sorting.sort_showname=='销量从低到高'"></image>
						<image src="../../../static/no_check.png" mode="aspectFit" v-else></image>
					</view>

					<view class="works_item" @click="conditions_check(3,'shop_desccredit','asc')">
						<text>评分从高到低</text>
						<image src="../../../static/check.png" mode="aspectFit" v-if="sorting.sort_showname=='评分从高到低'"></image>
						<image src="../../../static/no_check.png" mode="aspectFit" v-else></image>
					</view>
					<view class="works_item" @click="conditions_check(3,'shop_desccredit','desc')">
						<text>评分从低到高</text>
						<image src="../../../static/check.png" mode="aspectFit" v-if="sorting.sort_showname=='评分从低到高'"></image>
						<image src="../../../static/no_check.png" mode="aspectFit" v-else></image>
					</view>
				</scroll-view>
				<view class="btn-group">
					<button type="default" class="quxiao-btn" @click="reset(2)">恢复默认</button>
					<!-- <button type="default" class="save-btn" @click="sue_popup()">确定</button> -->
				</view>
			</uni-popup>
		</view>
		<!-- 底部区域 -->
		<view slot="footer">
			<!-- 底部tabBar -->
			<diy-bottom-nav></diy-bottom-nav>
		</view>
	</n-page>
</template>

<script>
	import street from '../public/js/street.js';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import sxRate from '@/components/sx-rate/index.vue'
	// import Map from '@/common/js/map/openMap.js'

	export default {
		components: {
			diyBottomNav,
			sxRate
		},
		data() {
			return {

			};
		},

		methods: {},
		computed: {
			themeStyle() {
				return 'theme-' + this.$store.state.index.themeStyle
			},
			starColor() {
				return this.$store.state.index.baseColor
			}
		},
		mixins: [street],
		filters: {
			distance(distance) {
				if (distance < 1000) return distance + 'm';
				else return (distance / 1000).toFixed(2) + 'km';
			}
		}
	};
</script>

<style lang="scss">
	@import '../public/css/street.scss';
	.wap-floating {
		margin-top: 200rpx;

		.item-group {
			max-height: 600rpx;

			.works_item {
				border-bottom: 2rpx solid #f8f8f8;
				padding: 20rpx 23rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 30rpx;
					height: 30rpx;
				}


			}
		}


		.btn-group {
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				margin: 0;
				width: 100%;
				border-radius: 0;
				color: #F8F8F8;
			}

			.quxiao-btn {
				background-color: #BFBFBF;
			}

			.save-btn {
				background-color: #FF0137;
			}
		}
	}
</style>

<style lang="scss">
	/deep/ .uni-scroll-view-content {
		background: #ffffff;
	}

	.content /deep/ .mescroll-upwarp {
		padding-bottom: 150rpx;
	}

	.content.active /deep/ .mescroll-upwarp {
		padding-bottom: 220rpx;
	}
</style>
